<template>
  <el-container>
    <el-main>
      <el-breadcrumb separator-class="el-icon-arrow-right">
        <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
        <el-breadcrumb-item>用户信息</el-breadcrumb-item>
      </el-breadcrumb>
      <!--          搜索框-->
      <div style="padding: 10px 0">
        <el-input
          suffix-icon="el-icon-user"
          style="width: 200px"
          placeholder="请输入用户名"
          v-model="user_name"
        ></el-input>
        <el-input
          suffix-icon="el-icon-s-custom"
          class="ml-5"
          style="width: 200px"
          placeholder="请输入职称"
          v-model="user_job"
        ></el-input>
        <el-button class="ml-5" type="primary" @click="load"> 搜索</el-button>
        <el-button class="ml-5" type="warning" @click="clear"> 重置</el-button>
      </div>

      <!--          表单-->
      <div style="margin: 10px 0">
        <el-popconfirm
          class="ml-5"
          confirm-button-text="确定"
          cancel-button-text="按错了!"
          icon="el-icon-info"
          icon-color="red"
          title="确定删除吗？"
          @confirm="delBatch"
        >
          <el-button type="primary" slot="reference"
            >批量删除<i class="el-icon-circle-plus-outline"></i
          ></el-button>
        </el-popconfirm>

        <el-button type="primary" @click="addUser" class="ml-5"
          >新增<i class="el-icon-circle-plus-outline"></i
        ></el-button>
        <el-button type="primary" @click="daochu"
          >导出为Excel<i class="el-icon-top-right"></i
        ></el-button>
      </div>
      <el-table :data="tableData" @selection-change="handleSelectionChange">
        <el-table-column type="selection" width="25px"></el-table-column>
        <el-table-column prop="userId" label="用户ID" width="95">
        </el-table-column>
        <el-table-column prop="userName" label="用户姓名" width="90">
        </el-table-column>
        <el-table-column prop="userJob" label="职称" width="120">
        </el-table-column>
        <el-table-column prop="userIsAdmin" label="是否管理" width="80">
        </el-table-column>
        <el-table-column prop="userSex" label="性别" width="50">
        </el-table-column>
        <el-table-column prop="userNumber" label="身份证号码" width="170">
        </el-table-column>
        <el-table-column prop="userPhone" label="手机号码" width="115">
        </el-table-column>
        <el-table-column prop="userAccount" label="账号" width="140">
        </el-table-column>
        <el-table-column prop="userQq" label="QQ号" width="110">
        </el-table-column>
        <!--            操作-->
        <el-table-column label="操作">
          <template slot-scope="scope">
            <el-button type="success" @click="handleEdit(scope.row)"
              >编辑<i class="el-icon-edit"></i
            ></el-button>
            <el-popconfirm
              class="ml-5"
              confirm-button-text="确定"
              cancel-button-text="按错了!"
              icon="el-icon-info"
              icon-color="red"
              title="确定删除吗？"
              @confirm="del(scope.row.userId)"
            >
              <el-button type="danger" slot="reference"
                >删除<i class="el-icon-remove-outline"></i
              ></el-button>
            </el-popconfirm>
          </template>
        </el-table-column>
      </el-table>

      <div style="padding: 10px 0">
        <!--            分页插件的基本参数-->
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="pageNum"
          :page-sizes="[5, 10, 15, 20]"
          :page-size="pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
        >
        </el-pagination>
      </div>
      <!--          弹框-->
      <el-dialog title="用户信息" :visible.sync="outerVisible" width="980px">
        <el-form size="mini" :inline="true" :model="form" ref="form">
          <el-form-item label="姓名">
            <el-input
              style="width: 220px"
              v-model="form.userName"
              autocomplete="off"
              placeholder="必填"
            ></el-input>
          </el-form-item>
          <el-form-item label="职位">
            <el-input
              style="width: 220px"
              v-model="form.userJob"
              autocomplete="off"
            ></el-input>
          </el-form-item>

          <el-form-item label="是否管理">
            <el-input
              style="width: 220px"
              v-model="form.userIsAdmin"
              autocomplete="off"
              placeholder="填是或者否"
            ></el-input>
          </el-form-item>
          <el-form-item label="性别">
            <el-input
              style="width: 220px"
              v-model="form.userSex"
              autocomplete="off"
            ></el-input>
          </el-form-item>

          <el-form-item label="身份证">
            <el-input
              style="width: 220px"
              v-model="form.userNumber"
              autocomplete="off"
              placeholder="必填"
            ></el-input>
          </el-form-item>

          <el-form-item label="手机">
            <el-input
              style="width: 220px"
              v-model="form.userPhone"
              autocomplete="off"
            ></el-input>
          </el-form-item>
          <el-form-item label="账号">
            <el-input
              style="width: 220px"
              v-model="form.userAccount"
              autocomplete="off"
              placeholder="必填"
            ></el-input>
          </el-form-item>
          <el-form-item label="QQ">
            <el-input
              style="width: 220px"
              v-model="form.userQq"
              autocomplete="off"
            ></el-input>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="outerVisible = false">取 消</el-button>
          <el-button type="primary" @click="tijiao"> 提交</el-button>
        </div>
      </el-dialog>
    </el-main>
  </el-container>
</template>

<script>

import request from "../../utils/request";

export default {
  name: "Conduct",
  data() {
    return {
      //表格数据
      tableData: [],
      //分页数据
      total:0,
      pageNum:1,
      pageSize:5,
      //对搜索框参数的数据绑定
      user_name:"",
      user_phone:"",
      user_job:"",
      outerVisible: false,
      form:{},
      multipleSelection:[],
      meta: {
        requireAuth: true
      }
    }
  },

  created() {
    //调用请求的方法
    this.load();
  },

  methods:{
    //删除的方法
    del(userId){
      request.delete("user/" + userId).then(res =>{
        if (res){
          //提示成功
          this.$message.success("成功");
          //刷新
          this.load();
        }else {
          this.$message.error("失败!");
        }

      })
    },
    //批量删除
    delBatch(){
     let ids = this.multipleSelection.map(v =>v.userId)
        request.post("user/del/batch" , ids).then(res =>{
          if (res){
            //提示成功
            this.$message.success("批量删除成功");
            //刷新
            this.load();
          }else {
            this.$message.error("批量删除失败!请新增需要删除的数据");
          }
        })
    },
    //编辑
    handleEdit(row){
      this.form = row;
      //打开弹框
      this.outerVisible = true;
    },
    //封装请求的方法
    load(){
      request.get("user/findPage",{
        params: {
          pageNum : this.pageNum,
          pageSize : this.pageSize,
          user_name : this.user_name,
          user_job : this.user_job
        }
      }).then(res=>{
              //把传回来的值给tableData
              this.tableData = res.records;
              //total
              this.total = res.total;
      })
    },
    handleSizeChange(pageSize){
      this.pageSize = pageSize;
      //参数改变以后重新调用请求的方法
      this.load();
    },
    handleCurrentChange(pageNum){
      this.pageNum = pageNum;
      //参数发生改变以后重新请求方法
      this.load();
    },
    //清空表单数据
    clear(){
       this.user_name="";
       this.user_phone="";
       this.user_job="";
      //刷新
      this.load()
    },
    //新增用打开弹框
    addUser(){
      //单击新增用户打开弹框
      this.outerVisible = true;
      //把from表单置空
      this.form = {}
    },
    daochu(){
     window.open("http://localhost:8848/user/export")
    },
    //表单提交
    tijiao(){
      request.post("user/insertOrUpdate",this.form).then(res =>{
        //如果新增成功
          if (res){
           //提升新增成功
           this.$message.success("成功");
            //关闭弹框
            this.outerVisible = false;
            //刷新
            this.load();
          }else {
            this.$message.error("失败!请仔细核对信息!");
            //关闭弹框
            this.outerVisible = false;
          }
      })
    },
    //获得批量删除的id
    handleSelectionChange(val){
     this.multipleSelection = val;
    }
  }
};
</script>

<style scoped lang="less">
</style>
